//1 获取学生数据，并渲染到表格
async function renderStudents(){
    const {data:res}=await axios.get('/students')
    // console.log(res)
    let arr = res.data.map(item=>{
       return` <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender===0? '男':'女'}</td>
        <td>${item.group}</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr> `
    })
    document.querySelector('tbody').innerHTML=arr.join('')
}
renderStudents()
//添加操作，需要提前准备，比如模态框的用法，省市县联动效果
//bootstrap模态框使用方法 两个步骤 1 实例化  2 调用方法显示或隐藏
//点击+好事
let addmodel = new bootstrap.Modal(document.querySelector('#modal'))
document.querySelector('#openModal').addEventListener('click',function(){
    document.querySelector('#modal h5').innerHTML='添加学员'
    document.querySelector('#form').reset()

    addmodel.show()
    // addmodel.hide()
})

async function incity(){
    let province=document.querySelector('[name=province]')
    let city=document.querySelector('[name=city]')
    let area=document.querySelector('[name=area]')
  // 4.1 -------- 先获取所有的省 -------------
    const {data:res}=await axios.get('/api/province')
    // console.log(res)
    let arr = res.data.map(item=>
        `<option value="${item}">${item}</option>`
    )
    
    province.innerHTML='<option value="">--省份--</option>' + arr.join('')

    // 4.2 -------- 切换省的时候，获取市 -------------
     province.addEventListener('change', async function () {
    let pname = province.value // 获取当前选择的省的名字
    // 省切换后，无论如何，都要重置县
    area.innerHTML = '<option value="">--地区--</option>'
    // 如果没有选择省，则需要重置市
    if (pname === ''){
        return (city.innerHTML = '<option value="">--城市--</option>')
    } 
    // 下面，正常获取对应的市，并渲染到第2个下拉框的位置
    // console.log(pname)
    const { data: res2 } = await axios.get('/api/city', { params: { pname } })
    // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
    let arr2 = res2.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = '<option value="">--城市--</option>' + arr2.join('')
  })
  
  // 4.3 -------- 切换市的时候，获取县 -------------
  city.addEventListener('change', async function () {
    let pname = province.value // 获取当前选择的省的名字
    let cname = city.value // 获取市的名字
    // 没有选择市，要重置县
    if (cname === '') return (area.innerHTML = '<option value="">--地区--</option>')
    // 下面，正常获取对应的县，并渲染到第3个下拉框的位置
    // console.log(pname)
    const { data: res3 } = await axios.get('/api/area', { params: { pname, cname } })
    // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
    let arr3 = res3.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = '<option value="">--地区--</option>' + arr3.join('')
  })

}
incity()

//点击弹层中确认按钮时添加
document.querySelector('#submit').addEventListener('click',async function(e){
    e.preventDefault()
    let data=val(document.querySelector('form'))
    // console.log(data)
    data.age=+data.age//+必须无空格
    data.group=+data.group
    data.gender=+data.gender
    data.hope_salary=+data.hope_salary
    data.salary=+data.salary

 // 点击弹出层中的确认的时候，根据弹出层中的标题判断一下，是添加操作还是修改操作

  let title = document.querySelector('#modal h5').innerHTML
  if(title==='添加学员'){
     //ajax提交
     try{
        let {data:res}=await axios.post('/students',data)
        message.success(res.message)//使用插件提示
        renderStudents()//重新获取页面数据
        addmodel.hide()//关闭弹层

    }catch(e){
        message.error('添加失败')
    }
  }else if(title==='修改学员'){
   try{
    let id =document.querySelector('#modal h5').dataset.id
    let {data:res}=await axios.put(`/students/${id}`,data)
        message.success(res.message)//使用插件提示
        renderStudents()//重新获取页面数据
        addmodel.hide()//关闭弹层
   }catch (e){
      message.error('添加失败')
   }
  }
 
})

//删除操作
document.querySelector('tbody').addEventListener('click',async function(e){
   //判断电机的是否是删除
   if(e.target.classList.contains('bi-trash')){
    let id=e.target.dataset.id
    // console.log('shanchu')
    try{
   const{data:res}= axios.delete(`/students/${id}`)
   message.success('删除成功')
   renderStudents()
   }catch(e){
    message.error('删除失败')
   }
}
   //判断点击的是否时编辑
   if(e.target.classList.contains('bi-pen')){
    console.log('bianji ')
    let id = e.target.dataset.id

    //修改模态狂标题
    document.querySelector('#modal h5').innerHTML='修改学员'
    document.querySelector('#modal h5').setAttribute('data-id',id)

    addmodel.show()//点击时出现弹窗
    const{data:res}=await axios.get(`/students/${id}`)
    let p1=axios.get('/api/city',{params:{pname:res.data.province}})
    let p2=axios.get('/api/area',{params:{pname:res.data.province,cname:res.data.city}})
    const result = await Promise.all([p1,p2])
    // console.log(result)
    let arr2 =result[0].data.data.map(item=>`<option value="${item}">${item}</option>`)
    document.querySelector('[name=city]').innerHTML='<option value="">--城市--</option>'+arr2.join('')
    let arr3 =result[1].data.data.map(item=>`<option value="${item}">${item}</option>`)
    document.querySelector('[name=area]').innerHTML='<option value="">--地区--</option>'+arr3.join('')

   val(document.querySelector('#form'),res.data)
   
   }
   
})
